<template>
	<view class="container container17782">
		<view class="flex diygw-col-24 diygw-bottom olive bar1-clz">
			<view class="diygw-grid diygw-actions">
				<button @tap="navigateTo" data-type="page" data-url="/pages/Home" class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-home" style="color: #ffffff"> </view>
						<view class="diygw-grid-title"> 首页 </view>
					</view>
				</button>
				<button @tap="navigateTo" data-type="page" data-url="/pages/data" class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-discover" style="color: #ffffff"> </view>
						<view class="diygw-grid-title"> 数据信息 </view>
					</view>
				</button>
				<button @tap="navigateTo" data-type="page" data-url="/pages/vip" class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar diy-icon-people" style="color: #ffffff"> </view>
						<view class="diygw-grid-title"> 用户中心 </view>
					</view>
				</button>
			</view>
		</view>
		<view class="flex flex-wrap diygw-col-24 items-center flex-clz">
			<view class="flex diygw-col-0">
				<view class="diygw-avatar lg radius bg-none">
					<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/tx-nxs4.png"></image>
				</view>
			</view>
			<view class="diygw-col-0 name-clz diygw-text-md"> {{name}} </view>
			<view class="diygw-col-0 id-clz diygw-text-md"> {{id}} </view>
			<view class="diy-icon-right diygw-col-0 id-clz diygw-text-md"> </view>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex4-clz">
			<view class="flex flex-wrap diygw-col-24 flex-direction-column" style="z-index: 1001">
				<diy-sticky offset-top="0">
					<view class="flex diy-sticky-100 flex-wrap diygw-col-24 flex7-clz">
						<view class="diygw-col-8 subject-clz"> 课程 </view>
						<view class="diygw-col-8 examination-clz"> 考试类别 </view>
						<view class="diygw-col-8 score-clz"> 考试分数 </view>
						<view class="clearfix"></view>
					</view>
					<view class="clearfix"></view>
				</diy-sticky>
			</view>
			<view v-for="(item,index) in printArray" class="flex flex-wrap diygw-col-24 flex1-clz">
				<view class="diygw-col-8 text8-clz"> {{item.subject}} </view>
				<view class="diygw-col-8 text10-clz"> {{item.examination}} </view>
				<view class="diygw-col-8 text12-clz"> {{item.score}} </view>
			</view>
		</view>
		<view class="version text-grey flex-direction-column flex diygw-col-24 justify-center align-center">
			<view> DIY官网代码生成器生成 </view>
			<view> http://www.diygw.com </view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
                name:'',
                id:'',
                printArray:[],
				//定义是否到底
				isbottom:false,
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
            console.log(option);
            this.get_id(option.name);
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
        onReachBottom(){
		    // 触底的时候请求数据，即为上拉加载更多
			if(!this.isbottom){
				this.pageindex++
				this.get_data()
				//this.search()
			}
		    
		        console.log('已加载全部数据')
		   
		},
		methods: {
			async init() {},
            
            get_id(name){
                uni.request({
                    url:"http://127.0.0.1:8080/api/demo/get_listbyid",
                    method:'POST',
                    data:{
                        name:name
                    },
                }).then((res)=>{
                    console.log(res)
                    this.printArray=res.data.data;
                    this.name=this.printArray[0].name;
                    this.id=this.printArray[0].id
                    
                })
            }
            
		}
	};
</script>

<style lang="scss" scoped>
	.bar1-clz {
		color: #fefefe;
	}
	.flex-clz {
		padding-top: 8px;
		border-bottom-left-radius: 20px;
		z-index: 100;
		padding-left: 8px;
		padding-bottom: 8px;
		border-top-right-radius: 20px;
		margin-right: 10px;
		background-color: rgba(255, 255, 255, 1);
		margin-left: 10px;
		box-shadow: 0px 1px 3px rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 10px - 10px) !important;
		border-top-left-radius: 20px;
		margin-top: 10px;
		border-bottom-right-radius: 20px;
		margin-bottom: 10px;
		padding-right: 8px;
	}
	.name-clz {
		margin-left: 5px;
		flex: 1;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.id-clz {
		margin-left: 5px;
		flex: 1;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.id-clz {
		margin-left: 5px;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.flex4-clz {
		background-color: #ffffff;
		margin-left: 10px;
		border-bottom-left-radius: 8px;
		box-shadow: 0px 0px 18px rgba(142, 137, 137, 0.24);
		overflow: hidden;
		width: calc(100% - 10px - 10px) !important;
		border-top-left-radius: 8px;
		margin-top: 15px;
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
		margin-bottom: 0px;
		margin-right: 10px;
	}
	.flex7-clz {
		color: #ffffff;
	}
	.subject-clz {
		padding-top: 12px;
		font-weight: bold;
		padding-left: 0px;
		padding-bottom: 12px;
		background-image: linear-gradient(90deg, rgba(66, 66, 66, 1) 0%, rgba(81, 81, 81, 1) 49%, rgba(66, 66, 66, 1) 100%);
		text-align: center;
		padding-right: 0px;
	}
	.examination-clz {
		padding-top: 12px;
		font-weight: bold;
		padding-left: 0px;
		padding-bottom: 12px;
		background-image: linear-gradient(128deg, rgba(90, 90, 90, 1) 0%, rgba(146, 146, 146, 1) 49%);
		text-align: center;
		padding-right: 0px;
	}
	.score-clz {
		padding-top: 12px;
		color: #494949;
		font-weight: bold;
		padding-left: 0px;
		padding-bottom: 12px;
		background-image: linear-gradient(128deg, rgba(219, 168, 124, 1) 0%, rgba(244, 213, 185, 1) 49%);
		text-align: center;
		padding-right: 0px;
	}
	.flex1-clz {
		color: #ffffff;
	}
	.text8-clz {
		background-color: #2d2d2d;
		padding-top: 12px;
		font-weight: bold;
		padding-left: 0px;
		padding-bottom: 12px;
		text-align: center;
		padding-right: 0px;
	}
	.text10-clz {
		background-color: #464646;
		padding-top: 12px;
		font-weight: bold;
		padding-left: 0px;
		padding-bottom: 12px;
		text-align: center;
		padding-right: 0px;
	}
	.text12-clz {
		background-color: #463f35;
		padding-top: 12px;
		font-weight: bold;
		padding-left: 0px;
		padding-bottom: 12px;
		text-align: center;
		padding-right: 0px;
	}
	.container17782 {
		padding-left: 0px;
		padding-right: 0px;

		font-size: 12px;
	}
	.container17782 {
		padding-bottom: 80px;
	}
</style>
